<template>
  <view class="container">
    <!-- 拼团列表区域 -->

      <!-- 拼团列表 -->
      <scroll-view 
        scroll-y 
        class="group-list"
        @scrolltolower="loadMore"
      >
        <view 
          v-for="(item, index) in displayedItems" 
          :key="index"
          class="group-item"
          @tap="navigateToDetail(item.id)"
        >
          <!-- 左侧信息区 -->
          <view class="item-main">
            <view class="item-title-row">
              <text class="item-title">{{ item.title }}</text>
            </view>
            
            <view class="route-info">
              <!-- 根据航班状态显示不同信息 -->
              <template v-if="item.airStatus === 0">
                <text class="flight-status">航班待定</text>
              </template>
              <template v-else-if="item.airStatus === 1">
                <text class="city">{{ item.startCity }}</text>
                <text class="arrow">→</text>
                <text class="city">{{ item.endCity  }}</text>
                <text class="flight-number">{{ item.airCode  }}</text>
              </template>
            </view>

  
          </view>

          <!-- 右侧成员头像区 -->
          <view class="member-avatars">
            <view class="avatar-stack">
              <template v-if="item.groupMemberDetailVOList && item.groupMemberDetailVOList.length > 0">
                <view 
                  v-for="(member, idx) in item.groupMemberDetailVOList" 
                  :key="idx"
                  class="member-avatar-wrap"
                  :style="{ zIndex: item.groupMemberDetailVOList.length - idx }"
                >
                  <text class="avatar-icon">👤</text>
                </view>
              </template>
              <view class="remaining-count" v-if="item.requiredMembers > (item.groupMemberDetailVOList ? item.groupMemberDetailVOList.length : 0)">
                +{{ item.requiredMembers - (item.groupMemberDetailVOList ? item.groupMemberDetailVOList.length : 0) }}
              </view>
            </view>
            <button class="join-btn" @tap.stop="joinGroup(item.id)">参与</button>
          </view>
        </view>

        <!-- 加载更多 -->
        <view class="load-more" v-if="!isAllLoaded">
          <view class="loading-indicator" v-if="isLoading">
            <view class="loading-spinner"></view>
            <text class="loading-text">加载中...</text>
          </view>
        </view>
        <view class="all-loaded" v-else>已经到底啦 ~</view>
      </scroll-view>
    </view>


  </view>
</template>

<script>
import { purchaseList } from "../../api/pt";

export default {
  data() {
    return {
      currentSort: 'recommended',
      showSortOptions: false,
      sortOptions: [
        { text: '推荐排序', value: 'recommended' },
        { text: '即将截止', value: 'deadline' },
        { text: '价格最低', value: 'priceAsc' },
        { text: '成团最快', value: 'grouping' }
      ],
      isLoading: false,
      isAllLoaded: false,
      page: 1,
      pageSize: 10,
      total: 0,
      displayedItems: [],
      id: null
    };
  },

  computed: {
    currentSortText() {
      const option = this.sortOptions.find(opt => opt.value === this.currentSort);
      return option ? option.text : '推荐排序';
    }
  },
  
  onLoad(e) {
    this.id = e.id;
    this.getPurchaseList();
  },
  
  methods: {
    getPurchaseList() {
      if (this.isLoading) return;
      
      this.isLoading = true;
      
      let params = {
        id: this.id,
        pageNum: this.page,
        pageSize: this.pageSize
      };
      
      purchaseList(params).then(res => {
        console.log('拼团数据:', res);
        if (res.code === 200) {
          const newItems = res.rows || [];
          this.total = res.total || 0;
          
          if (this.page === 1) {
            this.displayedItems = newItems;
          } else {
            this.displayedItems = [...this.displayedItems, ...newItems];
          }
          
          // 判断是否已加载全部数据
          this.isAllLoaded = this.displayedItems.length >= this.total;
        } else {
          uni.showToast({
            title: res.msg || '获取数据失败',
            icon: 'none'
          });
        }
        this.isLoading = false;
      }).catch(err => {
        console.error('获取拼团列表失败:', err);
        uni.showToast({
          title: '获取数据失败，请稍后重试',
          icon: 'none'
        });
        this.isLoading = false;
      });
    },

    formatCountdown(deadline) {
      const now = new Date();
      const end = new Date(deadline);
      const diff = end - now;

      if (diff <= 0) return '已结束';

      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

      return `${hours}小时${minutes}分钟`;
    },

    setSortOption(value) {
      this.currentSort = value;
      this.showSortOptions = false;
      
      // 重置页码并重新加载数据
      this.page = 1;
      this.isAllLoaded = false;
      this.getPurchaseList();
    },

    loadMore() {
      if (this.isLoading || this.isAllLoaded) return;
      
      this.page++;
      this.getPurchaseList();
    },

    joinGroup(id) {
      uni.navigateTo({
        url: `/pages/index/detail?id=${id}&action=join`
      });
    },

    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/concert/detail?id=${id}`
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  padding: 20rpx;
}

.group-list-section {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.sort-dropdown {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 28rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.sort-options {
  position: absolute;
  right: 20rpx;
  top: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
  z-index: 100;
}

.sort-option {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);

  &.active {
    color: #007AFF;
    background: rgba(0, 122, 255, 0.1);
  }
}

.group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 15rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.98);
  }
}

.item-main {
  flex: 1;
  margin-right: 20rpx;
}

.item-title-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 8rpx;
}

.item-title {
  font-size: 28rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.flight-number {
  font-size: 22rpx;
  color: #007AFF;
  background: rgba(0, 122, 255, 0.2);
  padding: 2rpx 8rpx;
  border-radius: 8rpx;
  margin-left: 8rpx;
}

.flight-status {
  font-size: 24rpx;
  color: #FF9500;
  background: rgba(255, 149, 0, 0.2);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.route-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 6rpx;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.arrow {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 4rpx;
}

.time {
  margin-left: 10rpx;
  color: rgba(255, 255, 255, 0.7);
}

.date-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
}

.date {
  color: rgba(255, 255, 255, 0.7);
}

.deadline {
  color: #FF3B30;
}

.member-avatars {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.avatar-stack {
  display: flex;
  align-items: center;
}

.member-avatar-wrap {
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid rgba(255, 255, 255, 0.8);
  margin-left: -15rpx;
  
  &:first-child {
    margin-left: 0;
  }
}

.avatar-icon {
  font-size: 30rpx;
}

.remaining-count {
  background: rgba(255, 255, 255, 0.3);
  width: 50rpx;
  height: 50rpx;
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-left: -15rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.8);
}

.join-btn {
  background: rgba(255, 149, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 149, 0, 0.3);
  border-radius: 25rpx;
  padding: 8rpx 20rpx;
  color: #FF9500;
  font-size: 24rpx;
  height: auto;
  line-height: 1.5;
  margin: 0;

  &:active {
    transform: scale(0.95);
  }
}

.load-more {
  text-align: center;
  padding: 20rpx;
}

.loading-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10rpx;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.loading-spinner {
  width: 30rpx;
  height: 30rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-top: 3rpx solid #FFFFFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 26rpx;
}

.all-loaded {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 26rpx;
  padding: 20rpx;
}
</style>
